import React, { useState } from 'react'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import useThrottle from '../../hooks/useThrottle'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import styles from './index.module.scss'
function Index() {
  const [visible, setVisible] = useState(false)
  const onFinish = useThrottle(() => {
    console.log(111);

  })
  return (
    <div>
      <Form
        onFinish={onFinish}
        layout='horizontal'
        footer={
          <Button block type='submit' color='primary' size='large'>
            登录
          </Button>
        }
      >
        <Form.Item
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' }]}
        >
          <Input placeholder='请输入手机号' />
        </Form.Item>
        <Form.Item
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <div className={styles.password}>
            <Input
              className={styles.input}
              placeholder='请输入密码'
              type={visible ? 'text' : 'password'}
            />
            <div className={styles.eye}>
              {!visible ? (
                <EyeInvisibleOutline onClick={() => setVisible(true)} />
              ) : (
                <EyeOutline onClick={() => setVisible(false)} />
              )}
            </div>
          </div>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index
